<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Highcharts Example</title>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(function () {

			/**
			 * Get the current time
			 */
			function getNow() {
				var now = new Date();

				return {
					hours: now.getHours() + now.getMinutes() / 60,
					minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600,
					seconds: now.getSeconds() * 12 / 60
				};
			};

			/**
			 * Pad numbers
			 */
			function pad(number, length) {
				// Create an array of the remaining length +1 and join it with 0's
				return new Array((length || 2) + 1 - String(number).length).join(0) + number;
			}

			var now = getNow();

			// Create the chart
			$('#container').highcharts({

						chart: {
							type: 'gauge',
							plotBackgroundColor: null,
							plotBackgroundImage: null,
							plotBorderWidth: 0,
							plotShadow: false,
							height: 200
						},

						credits: {
							enabled: false
						},

						title: {
							text: 'The Highcharts clock'
						},

						pane: {
							background: [{
								// default background
							}, {
								// reflex for supported browsers
								backgroundColor: Highcharts.svg ? {
									radialGradient: {
										cx: 0.5,
										cy: -0.4,
										r: 1.9
									},
									stops: [
										[0.5, 'rgba(255, 255, 255, 0.2)'],
										[0.5, 'rgba(200, 200, 200, 0.2)']
									]
								} : null
							}]
						},

						yAxis: {
							labels: {
								distance: -20
							},
							min: 0,
							max: 12,
							lineWidth: 0,
							showFirstLabel: false,

							minorTickInterval: 'auto',
							minorTickWidth: 1,
							minorTickLength: 5,
							minorTickPosition: 'inside',
							minorGridLineWidth: 0,
							minorTickColor: '#666',

							tickInterval: 1,
							tickWidth: 2,
							tickPosition: 'inside',
							tickLength: 10,
							tickColor: '#666',
							title: {
								text: 'Powered by<br/>Highcharts',
								style: {
									color: '#BBB',
									fontWeight: 'normal',
									fontSize: '8px',
									lineHeight: '10px'
								},
								y: 10
							}
						},

						tooltip: {
							formatter: function () {
								return this.series.chart.tooltipText;
							}
						},

						series: [{
							data: [{
								id: 'hour',
								y: now.hours,
								dial: {
									radius: '60%',
									baseWidth: 4,
									baseLength: '95%',
									rearLength: 0
								}
							}, {
								id: 'minute',
								y: now.minutes,
								dial: {
									baseLength: '95%',
									rearLength: 0
								}
							}, {
								id: 'second',
								y: now.seconds,
								dial: {
									radius: '100%',
									baseWidth: 1,
									rearLength: '20%'
								}
							}],
							animation: false,
							dataLabels: {
								enabled: false
							}
						}]
					},

					// Move
					function (chart) {
						setInterval(function () {
							var hour = chart.get('hour'),
									minute = chart.get('minute'),
									second = chart.get('second'),
									now = getNow(),
							// run animation unless we're wrapping around from 59 to 0
									animation = now.seconds == 0 ?
											false :
									{
										easing: 'easeOutElastic'
									};

							// Cache the tooltip text
							chart.tooltipText =
									pad(Math.floor(now.hours), 2) + ':' +
									pad(Math.floor(now.minutes * 5), 2) + ':' +
									pad(now.seconds * 5, 2);

							hour.update(now.hours, true, animation);
							minute.update(now.minutes, true, animation);
							second.update(now.seconds, true, animation);

						}, 1000);

					});
		});

		// Extend jQuery with some easing (copied from jQuery UI)
		$.extend($.easing, {
			easeOutElastic: function (x, t, b, c, d) {
				var s = 1.70158;
				var p = 0;
				var a = c;
				if (t == 0) return b;
				if ((t /= d) == 1) return b + c;
				if (!p) p = d * .3;
				if (a < Math.abs(c)) {
					a = c;
					var s = p / 4;
				}
				else var s = p / (2 * Math.PI) * Math.asin(c / a);
				return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
			}
		});
	</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>

<div id="container" style="width: 300px; height: 300px; margin: 0 auto"></div>

</body>
</html>
